<template>
    <div>
        <myHeaderVue>
            <template #left>
                <img src="../../../public/img/左箭头.svg" style="width: 20%;height: 100%;" alt="" @click="$router.go(-1)">
            </template>
            <template #center>设置密码</template>
        </myHeaderVue>
        <div class="main">
            <div class="box">
                <div>
                    <input type="text" placeholder="请输入手机号" v-model="obj.mobile">
                </div>
                <div>
                    <span @click="verification" v-if="falg">获取验证码</span>
                    <span style="color:#ccc" v-else>获取验证码({{num}})</span>
                </div>
            </div>
            <div class="box">
                <div>
                    <input type="text" placeholder="请输入验证码" v-model="obj.sms_code">
                </div>
            </div>
            <div class="box">
                <div>
                    <input type="password" placeholder="请输入新密码" v-model="obj.password">
                </div>
            </div>
            <van-button color="#ff8c41" style="width:100%;margin-top: 1rem; height: 1rem;border-radius: 0.5rem;"
                @click="setPassword">登录
            </van-button>
        </div>

    </div>
</template>

<script>
import myHeaderVue from '@/components/myHeader.vue';
import { semsCode, setpassword } from '@/http/api'
import { Button, Toast, Notify } from "vant";
export default {
    components: {
        myHeaderVue, [Button.name]: Button,
        [Toast.name]: Toast,
    },
    data() {
        return {
            falg: true,
            num: 6,
            //修改密码参数
            obj: {
                mobile: '',
                sms_code: '',
                password: ''
            }
        }
    },
    methods: {
        verification() {
            semsCode(this.obj.mobile, 'getPassword').then(res => {
                Toast(res.data.msg);
            })

            this.falg = false
            this.trme = setInterval(() => {
                this.num > 0 ? this.num-- : clearInterval(this.trme)
                if (this.num == 0) {
                    this.falg = true
                    this.num = 10
                }
            }, 1000)
        },
        async setPassword() {
            let res = await setpassword(this.obj)
            Toast(res.data.msg);
            res.data.code == 200 ? this.$router.push('my') : ''
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 89vh;
    margin-top: 1vh;
    background-color: #fff;
}

.box {
    width: 96%;
    margin: auto;
    border-bottom: 1px solid #ccc;
    line-height: 1.2rem;
    display: flex;
    justify-content: space-between;

    >div:nth-child(1) {
        width: 70%;

        input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
        }


    }



    span {
        color: #eb6100;
    }
}

.box:focus-within {
    border-bottom: 1px solid #ea5f00;
}
</style>